/* Non-essential styles */
div {
    margin:10px;

    border-top:1px solid gray;
    border-bottom:2px solid black;
    border-left:1px solid gray;
    border-right:2px solid black;

    background-color:yellow;
}

*.box_base {
    margin:10px;

    border-top:1px solid gray;
    border-bottom:2px solid black;
    border-left:1px solid gray;
    border-right:2px solid black;

    background-color:yellow;
}

p  {
    margin:10px;

    border-top:1px solid gray;
    border-bottom:2px solid black;
    border-left:1px solid gray;
    border-right:2px solid black;

    background-color:white;
}

h2 {
    font-size:1.1em; margin:0;
}

*.section
{
    position:relative;
    background-color:gold;
}


/* Essential Styles */

#paragraph_after_id {
    position:static;

    width:380px;        /* has no effect on span element */
    margin-left:auto;
    margin-right:auto;

    border:1px solid fuchsia;
    border-bottom:2px solid black;
    border-right:2px solid black;
}

*.static_cls {
    position:static;

    top:50px;
    left:150px;

    border:1px solid teal;
    border-bottom:2px solid black;
    border-right:2px solid black;
}

*.absolute_cls {
    position:absolute;
    top:20px;
    left:215px;
}

*.fixed_cls {           /* this is nice!!! I didn't know about fixed!!! */
    position:fixed;
    top:150px;
    left:680px;
}

*.relative_cls {
    position:relative;
    top:20px;
    left:10px;
}

*.float_cls {
    float:right;

    margin:0px;
}




